<template>
	<view class="withdraw">
		<u-toast ref="uToast" />
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;" :background="background" title="提现">
		</u-navbar>
		<view class="withdraw-head">
			<view class="withdraw-head-to">到账银行卡</view>
			<view class="withdraw-head-way">
				<view class="withdraw-head-way-1" style="display: flex;" @click="showCardBox">
					<view class="bankIcon" :class="['icon-'+selectedPayWay.bankType]"></view>
					<text style="margin-left: 10rpx;" class="way-text">{{bankTypeMap.get(selectedPayWay.bankType)}}{{selectedPayWay.bankCard===undefined?'':'('+selectedPayWay.bankCard+')'}}</text>
				</view>
				<view class="withdraw-head-way-2">预计2小时内到账</view>
			</view>
		</view>
		<view style="margin-top: -60rpx;">
			<view class="withdraw-body">
				<text>提现金额</text>
				<view class="input-money">
					<text class="rmb">￥</text>
					<input v-model.number="extract" type="text" @focus.prevent="stopKeyborad" class="t-input" />
				</view>
				<view class="info-money">
					<view v-if="is_out">
						<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
					</view>
					<view v-else-if="is_lowest">
						<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
					</view>
					<view v-else>
						<text class="info-money-num">当前可提现余额{{ pool }}元，</text>
						<text class="info-money-all" @click="getAll">全部提现</text>
					</view>
				</view>
				<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
			</view>
		</view>
		<view :class="['keyboard', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
			<view class="keyboard-item " @tap="keyboradDel()"><text>X</text></view>
		</view>
		<radio-group @change="changeRedio">
		<view class="cu-modal" :class="cardBox ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end"><view class="content">选择支付方式</view></view>
				<u-line></u-line>
				<view class="padding-xl bg-white" style="text-align: left;">
					<block v-for="(item,index) in bankcardList" :key="index">
						<view @click="changeCard(index)">
							<view style="display: flex;">
								<view style="margin-top: 5rpx;" class="bankIcon" :class="['icon-'+item.bankType]"></view>
								<text style="margin-left:6rpx;font-size: 32rpx;">{{bankTypeMap.get(item.bankType)}}{{item.bankCard===undefined?'':'('+item.bankCard+')'}}</text>
								<view style="margin-left: auto;margin-top: 20rpx;">
									<radio :value="index"  style="transform:scale(0.7)" :checked="index===radio" ></radio>
								</view>
							</view>
							<view style="margin-top: -20rpx;" class="withdraw-head-way-2">2小时内到账</view>
						</view>
						<u-line style="margin: 1rpx;"></u-line>
					</block>
					<view style="display: flex;" @click="toAddCard">
						<view>
							<u-icon style="" name="plus" ></u-icon>
							<text style="font-size: 32rpx;margin-left:10rpx;">添加银行卡</text>	
						</view>
					</view>
				</view>
				<u-line></u-line>
				
				<view class="cu-bar bg-white justify-end">
				</view>
			</view>
		</view>
		</radio-group>
		<tui-keyboard :show="showModal" @close="closeKeyboard" @click="handleClick">
			<view style="height: 200rpx;">
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">支付密码</view>
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
		</view>
	</view>
</template>

<script>
import {_bankTypeMap,_cardTypeMap,_cardStyleMap} from '@/pages/data/bank.js'
	export default {
		
	data() {
		return {
			background: {
				backgroundColor: '#f7f7f7;'
			},
			cardBox:false,
			pool: 0,
			extract: '',
			service_fee: 0.0,
			showModal: false,
			is_out: false,
			is_lowest: false,
			is_post: false,
			lowest: 0,
			fee: 0,
			money: '',
			real_money: '',
			keyboradShow: false,
			isIphoneX: false,
			isRefuse: false,
			bankcardList:[],
			bankTypeMap:new Map([]),
			cardTypeMap:new Map([]),
			selectedPayWay:{},
			selectedPayWay:{
				bankType:'ZFB'
			},
			radio:0,
			flag:0,
			pwdArr:["", "", "", "", "", ""],
			payPassword:["", "", "", "", "", ""],
		};
	},
	watch: {
		extract(oldVal, newVal) {}
	},
	onLoad() {
		
	},
	onShow() {
	
		this.bankTypeMap=_bankTypeMap;
		this.cardTypeMap=_cardTypeMap;
		this.$u.api.getWallet().then(res=>{
			this.pool=res.balance
		})
		this.$u.api.getBankCardList().then(res=>{
			if(res.length<1){
				this.selectedPayWay={bankType:'请先绑卡'}
				return
			}
			this.bankcardList=res
			this.selectedPayWay=res[0]
		})
	},
	methods: {
		closeKeyboard(){
			this.pwdArr=["", "", "", "", "", ""]
			this.payPassword=["", "", "", "", "", ""]
			this.flag=0
			this.showModal=false
		},
		handleClick(v){
			if(v.index<9&&this.flag<6){
				this.pwdArr[this.flag]='●'
				this.payPassword[this.flag]=v.index+1
				this.flag+=1
				if(this.flag==6){
					this.submit()
				}
				
			}else if(v.index==10&&this.flag<6){
				this.pwdArr[this.flag]='●'
				this.payPassword[this.flag]=0
				this.flag+=1
				if(this.flag==6){
					this.submit()
				}
			}	
			if(v.index==9){
				this.closeKeyboard()
				return
			}
			if(v.index==11&&this.flag>0){
				this.payPassword[this.flag-1]=""
				this.pwdArr[this.flag-1]=""
				this.flag-=1
				return
			}
			
		},
		submit(){
			this.$u.api.withdraw({
				payPassword:this.payPassword.join(''),
				cardId:this.selectedPayWay.id,
				withdrawAmount:this.extract,
				bankCard:this.selectedPayWay.bankCard,
				bankType:this.selectedPayWay.bankType,
				cardType:this.selectedPayWay.cardType,
				
			}).then(res=>{
				this.showModal=false
				setTimeout(() => {
					
				}, 1000);
				this.$refs.uToast.show({
					title: '提现成功,请留意账单',
					duration:1000,
					type:'success',
					back:true,
				})
				
			})
			
		},
		changeRedio(i){
		
			this.radio=Number(i.detail.value)
			this.selectedPayWay=this.bankcardList[this.radio]
			this.cardBox=false
		},
		changeCard(i){
			this.radio=Number(i)
			this.selectedPayWay=this.bankcardList[this.radio]
			this.cardBox=false
		},
		async loadData() {
			this.lowest = 1;
			this.fee = 0;
			this.pool = 100;
			this.$nextTick(() => {
				this.keyboradShow = true;
			});
		},
		showCardBox(){
			this.cardBox=true
		},
		closeCardBox(){
			this.cardBox=false
		},
		stopKeyborad() {
			uni.hideKeyboard();
		},
		keyboradKey(key) {
			this.extract = this.extract * 10 + key;
			this.checkMoney();
		},
		keyboradDel() {
			if (this.extract && this.extract > 0) {
				let val = parseInt(this.extract / 10);
				if (val == 0) val = '';
				this.extract = val;
				this.checkMoney();
			}
		},
		getAll() {
			this.extract = this.pool;
			this.checkMoney();
		},
		checkMoney() {
			if (!this.extract || this.extract < this.lowest) {
				this.is_lowest = true;
				this.is_post = false;
			} else if (this.extract > this.pool) {
				this.is_out = true;
				this.is_lowest = false;
				this.is_post = false;
			} else {
				this.is_out = false;
				this.is_lowest = false;
				this.is_post = true;
			}
			if (parseFloat(this.extract).toString() == 'NaN') {
				this.is_post = false;
			}
		},
		handleShowModel() {
			if (this.isRefuse) return;
			this.checkMoney();
			if (!this.is_post) return;
			this.money = this.extract;
			this.service_fee = Number((this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/));
			this.real_money = Number((this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/));
			this.showModal = true;
		},
		getMoney() {
			this.showModal = false;
			if (this.isRefuse) return;
			this.isRefuse = true;
			setTimeout(() => {
				this.$api.msg('提现申请已提交，等待管理员处理');
			}, 500);
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		},
		toAddCard(){
			uni.navigateTo({
				url: "/pages/bankCard/addBankCard"
			});
		},
	},
	onPullDownRefresh() {
		this.extract = '';
		this.loadData();
		this.is_out = false;
		this.is_lowest = false;
		this.is_post = false;
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style lang="scss" scoped>
.padding-xl{
	padding: 30rpx 50rpx;
}
.num-lock-view {
	position: relative;
	margin-bottom: -2rpx;
	.solid-top::after {
	    border-top: 2rpx solid rgba(0, 0, 0, 0.1);
	}
	.cu-list.grid>.cu-item {
		text {
			color: inherit;
		}
		.num {
		    font-size: 40rpx;
		}
		.close {
		    font-size: 32.72rpx;
		    margin-top: 9.09rpx;
		}
		&:active {
			background-color: #f0f0f0;
		}
	}
}
.withdraw {
	background-color:#fff;
	height: 100vh;
	&-head {
		
		background-color: #f7f7f7;
		display: flex;
		align-content: center;
		padding: 20px 30px;
		padding-bottom: 90rpx;
		font-size: 14px;
		&-to {
		}
		&-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;
			&-1 {
				color: #576b95;
				margin-bottom: 10px;
				.way-icon {
					width: 16px;
					height: 16px;
					margin-right: 5px;
					top: 2px;
				}
			}
			&-2 {
				color: #acacac;
				font-size: 12px;
			}
		}
	}
	&-body {
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 20px 30px;
		font-size: 14px;
		.input-money {
			display: flex;
			align-content: center;
			
			font-weight: 600;
			border-bottom: 0.5px solid #eaeef1;
			.rmb {
				font-size: 2em;
				top: 15px;
				position: relative;
			}
			.t-input {
				height: 1.9em;
				font-size: 2.5em;
				border: none;
				position: relative;
				left: 3.5%;
				outline: none;
			}
		}
		.info-money {
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 20px;
			&-num {
				color: #b2b2b2;
			}
			&-all {
				color: #576b95;
			}
		}
		.tx {
			button {
				color: #b2b2b2;
			}
		}
		.tx-active {
			button {
				color: #fff;
				background: #07c160;
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ebebeb;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition: all 0.2s ease-in 0.2s;
	}
	.active {
		bottom: -400rpx;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #ebebeb;
		border-top: none;
		border-left: none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.delte image {
		width: 60rpx;
		height: 60rpx;
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
	.fee {
		em {
			font-size: 0.5rem;
			font-style: normal;
		}
	}
}
</style>
